import React, { useState } from 'react'
import './index.css'
export default function Item({ id, name, done, todoList, setTodoList }) {
    const [isActive, setIsActive] = useState(false)
    const onMouseHandle = (bool) => {
        return () => {
            setIsActive(bool)
        }
    }
    const checkChangeHandle = (e) => {
       const newTodoList =todoList.map(item => {
            if (item.id === id) {
                return { ...item, done: e.target.checked }
            }
            return item
        })
        setTodoList(newTodoList)
    }
    const deleteHandle = () => {
        const newTodoList = todoList.filter((item) => item.id !== id)
        setTodoList(newTodoList)
    }
    return (
        <li onMouseEnter={onMouseHandle(true)} onMouseLeave={onMouseHandle(false)} className={isActive ? 'active' : ''} >
            <label>
                <input type="checkbox"
                    onChange={checkChangeHandle}
                    checked={done} />
                <span>{name}</span>
            </label>
            <button className="btn btn-danger" onClick={deleteHandle} style={{ display: isActive ? "block" : "none" }}>删除</button>
        </li>
    )
}
